<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<html:xhtml />
<logic:present name="data_fullaccess">
<script type="text/javascript">
    var snpTable;
    var snps = new Array();

    function getEthnicity()
    {
        if ($("[name=selectedCohort] option:selected").length <= 0)
        {
            return false;
        }
        $("#ethnSelect").empty();
        $.ajax({
            url: "analysisAjax.do",
            data: {request: 'ethnicity',
                selectedCohort: $("[name=selectedCohort]").val()},
            success: function(data) {
                $("#ethnSelect").append(data);
            },
            error: function() {
                $("#ethnSelect").append('<option value="-1">Error on the server. Please reset cohorts.</option>');
            }
        });
    }

    function getSnps()
    {
        $.ajax({
            url: "analysisAjax.do",
            data: {request: 'snps',
                selectedGene: $("[name=selectedGenes]").val()},
            success: function(data) {
                snpTable.fnClearTable();
                rows = data.split("||");
                for (i = 0; i < rows.length; i++)
                {
                    cols = rows[i].split("|");
                    snpTable.fnAddData(cols, false);
                }
                snpTable.fnDraw();
            }
        });
    }

    function toggleCutValue()
    {
        if ($(":radio#none").is(":checked"))
        {
            $("select[name=cutType]").attr("disabled", "disabled");
            $(":text[name=cutValue]").attr("disabled", "disabled");
        }
        else
        {
            $("select[name=cutType]").removeAttr("disabled");
            $(":text[name=cutValue]").removeAttr("disabled");
            if ($(":radio#cut").is(":checked"))
            {
                $("span#cutLabel").empty().append("Censor");
            }
            else if ($(":radio#binarize").is(":checked"))
            {
                $("span#cutLabel").empty().append("Affected");
            }
        }
    }

    function toggleCut()
    {
        $.ajax({
            url: "analysisAjax.do",
            data: {request: 'isBinary',
                selectedPhenotype: $("[name=selectedPhenotype]").val()},
            success: function(data) {
                if (data == "true")
                {
                    $(":radio#cut").attr("disabled", "disabled");
                    $(":radio#binarize").attr("disabled", "disabled");
                }
                else
                {
                    $(":radio#cut").removeAttr("disabled");
                    $(":radio#binarize").removeAttr("disabled");
                }
                toggleCutValue();
            }
        });
    }

    $(document).ready(function() {
        // Set up tabs and next/prev buttons
        var $tabs = $("#exportTab").tabs();
        $("#subjectNext").click(function() {
            getEthnicity();
            $tabs.tabs('select', 1);
            return false;
        });
        $("#filterPrev").click(function() {
            $tabs.tabs('select', 0);
            return false;
        });
        $("#filterNext").click(function() {
            $tabs.tabs('select', 2);
            return false;
        });
        $("#varPrev").click(function() {
            $tabs.tabs('select', 1);
            return false;
        });
        $("#varNext").click(function() {
            $tabs.tabs('select', 3);
            return false;
        });
        $("#formatPrev").click(function() {
            $tabs.tabs('select', 2);
            return false;
        });

        // Ajax call binding
        $("div#requestSubject select").change(function() {
            getEthnicity();
        });
        // 'DataTablize' the table
        snpTable = $("div#snpForm #snpTable").dataTable({
            "bPaginate": true,
            "sPaginationType": "full_numbers",
            "bFilter": true,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aoColumns": [{"sType": "html"},
                {"sType": "html"},
                {"bSortable": false, "bSearchable": false, "sClass": "inputbox"}],
            "aaSorting": [[1,"asc"]]
        });
        // Set up include checkboxes
        $("div#snpForm #snpTable :checkbox").live("click", function(){
            if ($(this).is(":checked"))
            {
                // Add a dummy class
                $(this).parent().parent().addClass("selected");
            }
            else
            {
                // Remove the dummy class added above
                $(this).parent().parent().removeClass("selected");
            }
        });
        // Set up snp select dialog
        $("#snpForm").dialog({
            autoOpen: false,
            modal: true,
            width: 800,
            position: "top",
            buttons: {
                Ok: function() {
                    $("#hiddenSnps").empty();
                    trs = snpTable.fnGetNodes();
                    for(i = 0; i < trs.length; i++)
                    {
                        // Retrieve all selected rows using the dummy class
                        if ($(trs[i]).hasClass("selected"))
                        {
                            $("#hiddenSnps").append('<input type="hidden" name="selectedSnps" value="' + $(trs[i]).find(":checked").val() + '" />');
                        }
                    }
                    $(this).dialog("close");
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });
        $("#selectSnp").button().click(function() {
            getSnps();
            $("#snpForm").dialog("open");
        });

        // Set up selectedPhenotype change event
        $("select[name=selectedPhenotype]").change(toggleCut);
        toggleCut();
        // Set up cut variable select and textbox
        $(":radio[name=binarize]").change(toggleCutValue);
    });
</script>
<div id="export" class="content">
    <h2>Export Files</h2>
    <div id="exportTab">
        <ul>
            <li><a href="#requestSubject">Subjects</a></li>
            <li><a href="#requestFilter" onclick="getEthnicity();">Filter</a></li>
            <li><a href="#requestVar">Variables</a></li>
            <li><a href="#requestFormat">Format</a></li>
        </ul>
        <html:form action="/exportSubmit">
            <div id="requestSubject" class="input">
                <dl>
                    <dt><bean:message key="export.cohort" />:</dt>
                    <dd>
                        <html:select name="exportForm" property="selectedCohort" size="4" multiple="multiple">
                            <html:optionsCollection name="exportForm" property="cohorts" value="cohortID" label="name" />
                        </html:select>
                        <html:errors property="selectedCohort" />
                    </dd>
                    <dt><bean:message key="export.subCohort" />:</dt>
                    <dd>
                        <html:select name="exportForm" property="selectedSubCohort" size="2" multiple="multiple">
                            <html:optionsCollection name="exportForm" property="subCohorts" value="cohortPopulationID" label="populationName" />
                        </html:select>
                        <html:errors property="selectedSubCohort" />
                    </dd>
                </dl>
                <p><html:button styleId="subjectNext" property="submitType" value="Next" /></p>
            </div>
            <div id="requestFilter" class="input">
                <dl>
                    <dt>Subject Filter:</dt>
                    <dd>
                        <ul>
                            <li>
                                <html:checkbox styleId="removeDuplicateSubjects" property="removeDuplicateSubjects" />
                                <label for="removeDuplicateSubjects">Remove Duplicate Subjects</label>
                            </li>
                            <li>
                                <html:checkbox styleId="removeMzTwins" property="removeMzTwins" />
                                <label for="removeMzTwins">Remove MZ Twins</label>
                            </li>
                            <li>
                                <html:checkbox styleId="zeroIncomplete" property="zeroIncomplete" />
                                <label for="zeroIncomplete">Zero genotypes for incomplete trio's</label>
                            </li>
                            <li>
                                <html:checkbox styleId="zeroControls" property="zeroControls" />
                                <label for="zeroControls">Zero controls</label>
                            </li>
                            <li>
                                <html:checkbox styleId="hyperControls" property="hyperControls" />
                                <label for="hyperControls">Hyper controls</label>
                            </li>
                            <li>
                                <html:checkbox styleId="caseControl" property="caseControl" />
                                <label for="caseControl">Case-Control</label>
                            </li>
                            <li>
                                <html:checkbox styleId="cleanAsthmaControls" property="cleanAsthmaControls" />
                                <label for="cleanAsthmaControls">Clean Asthma Controls</label>
                            </li>
                        </ul>
                    </dd>
                    <dt><bean:message key="export.ethnicity" />:</dt>
                    <dd>
                        <html:select styleId="ethnSelect" property="selectedEthnicity" size="8" multiple="multiple" >
                            <html:option value="-1">Please select cohort(s).</html:option>
                        </html:select>
                        <html:errors property="selectedEthnicity" />
                    </dd>
                </dl>
                <p>
                    <html:button styleId="filterPrev" property="submitType" value="Previous" />
                    <html:button styleId="filterNext" property="submitType" value="Next" />
                </p>
            </div>
            <div id="requestVar" class="input list">
                <div id="hiddenSnps"></div>
                <dl>
                    <dt><bean:message key="export.gene" />:</dt>
                    <dd>
                        <html:select property="selectedGenes" size="6" multiple="multiple">
                            <html:optionsCollection property="availableGenes" value="geneID" label="name"/>
                        </html:select>
                        <html:errors property="selectedGenes" /><br />
                        <input id="selectSnp" type="button" value="Select individual SNP's" />
                    </dd>
                    <dt>Phenotype to Include:</dt>
                    <dd>
                        <html:select property="selectedPhenotype">
                            <html:optionsCollection property="phenotypes" value="phenotypeID" label="name" />
                        </html:select>
                    </dd>
                    <dt>Covariate(s) to Include (Optional):</dt>
                    <dd>
                        <html:select property="selectedCovariates" size="6" multiple="multiple">
                            <html:optionsCollection property="covariates" value="phenotypeID" label="name" />
                        </html:select>
                    </dd>
                    <dt><bean:message key="export.cut" />:</dt>
                    <dd>
                        <html:radio styleId="cut" property="binarize" value="cut" />
                        <label for="cut">Cut variables</label>
                        <html:radio styleId="binarize" property="binarize" value="binarize" />
                        <label for="binarize">Binarize variables</label>
                        <html:radio styleId="none" property="binarize" value="none" />
                        <label for="none">None</label><br />
                        <span id="cutLabel"></span>
                        <html:select property="cutType">
                            <html:options property="availableCutType" />
                        </html:select>
                        <html:text property="cutValue" size="5" />
                        <html:errors property="cutValue" />
                    </dd>
                </dl>
                <p>
                    <html:button styleId="varPrev" property="submitType" value="Previous" />
                    <html:button styleId="varNext" property="submitType" value="Next" />
                </p>
            </div>
            <div id="requestFormat" class="input">
                <dl>
                    <dt>Output Format:</dt>
                    <dd>
                        <html:select property="format">
                            <html:option value="UNPHASED">UNPHASED</html:option>
                            <html:option value="BPlink">Binary Plink</html:option>
                            <html:option value="fbat">fbat</html:option>
                            <html:option value="SAGE">SAGE</html:option>
                        </html:select>
                    </dd>
                    <dt>Number of Markers per File:</dt>
                    <dd>
                        <html:radio styleId="oneFilePerGene" property="filePerGene" value="true" />
                        <label for="oneFilePerGene">One file per gene</label><br />
                        <html:radio styleId="allInFile" property="filePerGene" value="false" />
                        <label for="allInFile">All markers in one file</label>
                    </dd>
                    <dt><bean:message key="export.email" />:</dt>
                    <dd>
                        <html:text property="email" />
                        <html:errors property="email" />
                    </dd>
                </dl>
                <p>
                    <html:button styleId="formatPrev" property="submitType" value="Previous" />
                    <html:submit styleId="requestData" property="submitType" value="Request Data" />
                </p>
            </div>
            <div id="snpForm" title="Select individual SNP's" class="list">
                <table id="snpTable" cellpadding="0" cellspacing="0" border="0" class="display">
                    <thead>
                        <tr>
                            <th>RS number</th>
                            <th>Gene</th>
                            <th>Include</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </html:form>
    </div>
</div>
</logic:present>